<!--
 * @Descripttion: 多选框
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-11 11:07:07
 * @LastEditors: GW
 * @LastEditTime: 2021-10-13 10:49:34
-->
<template>
    <section class="show-wrapper">
        <template v-if="data">
            <div class="title-box" :class="data.onFill?'required':''">
                <span class="title-name">{{data.title?data.title:'多选框'}}</span>
            </div>
            <a-checkbox-group v-model="data.value">
                <a-checkbox :style="checkboxStyle" v-for="item in data.data" :key="item" :value="item.key">
                    {{item.label}}
                </a-checkbox>
            </a-checkbox-group>
        </template>
        <template v-else>
            <div class="title-box" :class="data.onFill?'required':''">
                <span class="title-name">多选框</span>
            </div>
            <a-checkbox-group>
                <a-checkbox :style="checkboxStyle" v-for="item in selectData" :key="item" :value="item.key">
                    {{item.label}}
                </a-checkbox>
            </a-checkbox-group>
        </template>

    </section>
</template>

<script>
export default {
    name: 'Checkbox',
    props: {
        data: {
            type: Object,
            default: {}
        },
    },
    data () {
        return {
            selectData: [{ key: 1, label: '选项1' }, { key: 2, label: '选项2' }, { key: 3, label: '选项3' }],
            choiceSelect: 1,
            checkboxStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
        }
    },
    mounted () {
        //组件默认数据
        let { data } = this;
        let defaultData = {
            title: data.title ? data.title : '多选框',
            data: data.data.length > 0 ? data.data : this.selectData,//数据
            onEdit: true,
        }
        this.data = Object.assign(data, defaultData);
    }
}
</script>

<style lang="less" scoped>
    .show-wrapper {
        padding:6px 12px;
        .title-box {
            position: relative;
            height: 32px;
            line-height: 32px;
            .title-name {
                color: #333;
            }
        }

        .required::after {
            position: absolute;
            content: '*';
            top: 2px;
            margin-left: 2px;
            font-size: 16px;
            color: red;
            font-family: 'SimSun,sans-serif';
        }
        .ant-checkbox-wrapper {
            margin-left: 0px !important;
        }
    }
</style>
